<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .small {
      padding: 6px 16px;
      border: 1px solid #446d88;
      background: #58a linear-gradient(#77a0bb, #58a);
      border-radius: 4px;
      box-shadow: 0 1px 5px gray;
      color: white;
      text-shadow: 0 -1px 1px #335166;
      font-size: 20px;
      line-height: 30px;
    }

    .big {
      padding: .3em .8em;
      border: 1px solid #446d88;
      background: #58a linear-gradient(#77a0bb, #58a);
      border-radius: .2em;
      box-shadow: 0 .05em .25em gray;
      color: white;
      text-shadow: 0 -.05em .05em #335166;
      font-size: 125px;
      line-height: 1.5;
    }

    /* 修改颜色只需覆盖 background-color 属性即可 */
    .change-color {
      padding: .3em .8em;
      border: 1px solid rgba(0, 0, 0, .1);
      background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
      border-radius: .2em;
      box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
      color: white;
      text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
      font-size: 125%;
      line-height: 1.5;
    }

    /* 这里修改父元素的字号大小，使用百分数作为字号值的按钮都会发生改变 */
    /* html {
      font-size: 125px;
    } */

    .ok {
      background-color: #6b0;
    }

    .cancel {
      background-color: #c00;
    }
  </style>
</head>
<body>
  <button class="small">Yes!</button>
  <button class="big">Yes!</button>
  <button class="change-color ok">OK</button>
  <button class="change-color cancel">Cancel</button>
</body>
</html>